import 'cube.css/src/scss/neat.scss'
import 'static/font/iconfont.css'
import 'element-ui/lib/theme-default/index.css'
import '@/base/scss/common.scss'
import './calendars.scss'
import Vue from 'vue'
import ElementUI from 'element-ui'
import UnifyHeader from 'components/header/header'
import UnifyFooter from 'components/footer/footer'
import Suspension from 'components/suspension/suspension'
import mixins from '@/mixins'
import Api from '@/api.js'
import Utils from '../../components/component/util'
import {DEVELOPMENT, PRODUCTION} from "../../config"

let apiHost = process.env.NODE_ENV === 'development' ? DEVELOPMENT : PRODUCTION

let bbsSlsectDate = {}

Vue.mixin(mixins)
Vue.use(ElementUI)
Vue.use(Utils)  // 工具函数

//eslint-disable-next-line no-new
new Vue({
  el: '#app',
  data: {
    showSuspensionHeight: 0,
    picturePrefix: `http://${apiHost.IMAGE_API_HOST}/`,
    attributeValues: [],
    listIndex: 0,
    nowSize: '',
    isSelect: false,
    price: 0,
    previewImageUrl: '',
    bgImgShowBool: false,
    cache: {}
  },
  methods: {
    suspendPackUp: function () {
      let $el = this.$refs.suspend.$el
      $el.style.height = '38px'
      setTimeout(() => {
        $el.removeAttribute('style')
      }, 20)
    },
    suspendPullDown: function (type) {
      this.customizationItem = type
      let $el = this.$refs.suspend.$el
      $el.style.height = '154px'
    },
    /*更新sku*/
    updataSkuData() {
      this.skuCode = JSON.parse(sessionStorage['urlQuery']).category + '.' + this.nowSize.code
      console.log(this.skuCode)
      Api.sku.querySku({
        category: JSON.parse(sessionStorage['urlQuery']).category,
        parameter: this.skuCode
      }).then(res => {
        bbsSlsectDate.tplCode = res.data.templateCode
        bbsSlsectDate.skuId = res.data.skuId
        bbsSlsectDate.price = res.data.price
        bbsSlsectDate.skuCode = this.skuCode
        // bbsSlsectDate.skuCode = res.data.skuCode
        this.price = res.data.price
        this.previewImageUrl = res.data.previewImageUrl
        bbsSlsectDate.category = res.data.category
        if (res.data.size === '500X600') {
          bbsSlsectDate.editCnfName = 'pc_guali_500X600_single'
          sessionStorage['gualiType'] = '竖'
        } else if (res.data.size === '600X500') {
          bbsSlsectDate.editCnfName = 'pc_guali_600X500_single'
          sessionStorage['gualiType'] = '横'
        } else if (res.data.size === '260X380') {
          bbsSlsectDate.editCnfName = 'pc_guali_260X380_single'
          sessionStorage['gualiType'] = '小挂历'
        }
        sessionStorage['titleName'] = '挂历'
        setTimeout(function () {
          sessionStorage.setItem("bbsSlsectDate", JSON.stringify(bbsSlsectDate))
          let tplCode = JSON.parse(sessionStorage.getItem("urlQuery"))
          tplCode.tplCode = res.data.templateCode
          sessionStorage.setItem("urlQuery", JSON.stringify(tplCode))
        }, 100)
      })
    },
    startCustom: function () {
      if (!this.isSelect) {
        this.$message({
          showClose: true,
          iconClass: "atrup_Message",
          message: '请先选择您需要定制的尺寸 !',
          type: 'success'
        })
        return
      }
      if (localStorage.getItem("userDbId")) {
        location.href = '/album/gualiEdit'
      } else {
        this.setUrlCallback()
      }
    },
    select: function (index, index2) {
      let oUrl = JSON.parse(sessionStorage['urlQuery'])
      if (index > 0) {
        oUrl.category = 'guali2'
        sessionStorage.setItem("urlQuery", JSON.stringify(oUrl))
      } else {
        oUrl.category = 'guali'
        sessionStorage.setItem("urlQuery", JSON.stringify(oUrl))
      }
      this.bgImgShowBool = true
      this._getAttributes(index, index2)
      return true
    },
    _setSessionStorageData: function () {
      sessionStorage['urlQuery'] = JSON.stringify({
        'category': this.getQueryString('category', 'guali'),
        'defDbId': this.getQueryString("defDbId", 'd86b43b8-b496-11e7-ab6d-c88d8360f6c1'),
        'tplCode': this.getQueryString("tplCode")
      })
    },
    _getAttributes: function (index) {
      // var categorys = JSON.parse(sessionStorage['urlQuery']).category
      // var page = ''
      // if (categorys === 'guali') {
      //   page = 12
      // } else {
      //   page = 13
      // }
      let setData = () => {
        let data = this.attributeValues
        bbsSlsectDate.name = bbsSlsectDate._name + '.' + data[index].name + '.13页'
        bbsSlsectDate.skuCode = bbsSlsectDate._skuCode + '.' + data[index].code + '.13'
        bbsSlsectDate.size = data[index].code
      }
      if (this.attributeValues.length && this.attributeValues.length > index) {
        this.nowSize = this.attributeValues[index]
        this.updataSkuData()
        setData()
        return
      }
      var urlParse = JSON.parse(sessionStorage['urlQuery'])
      urlParse.category = 'guali2'
      var attribute = []
      Api.sku.queryAttributes(urlParse).then(res => {
        if (res) {
          attribute = res.data.attributes[0].attributeValues
          //再次选中的挂历
          Api.sku.queryAttributes(JSON.parse(sessionStorage['urlQuery'])).then(res => {
            if (res) {
              var dataGuaLi = res.data.attributes[0].attributeValues.concat(attribute)
              this.attributeValues = dataGuaLi
              if (!this.nowSize) {
                bbsSlsectDate._name = res.data.name
                bbsSlsectDate._skuCode = res.data.code
                this._getAttributes(0)
              }
            }
          })
        }
      })
    }
  },
  mounted() {
    let that = this
    this.$nextTick(function () {
      that.showSuspensionHeight = that.$refs.showSuspensionFlag.offsetTop
    })
  },
  created: function () {
    this._setSessionStorageData()
    this._getAttributes()
    document.body.style.cssText = 'opacity:1;'
  },
  components: {
    UnifyHeader,
    UnifyFooter,
    Suspension
  }
})
